<template>
  <business-layout title='告警特征统计' custom-title>
    <div style='height: 100%;'>
      <div style='height: 50%;'>
        <div style='height: 10%'>
          <a-row>
            <a-form :form='form' layout='inline' @submit='handleQueryData'>
              <a-form-item>
                <h3>告警源IP</h3>
              </a-form-item>
              <a-form-item label=''>
                <a-date-picker  v-decorator="['startTime' ]"
                                placeholder='请选择开始时间'
                                valueFormat='YYYY-MM-DD 00:00:00'
                                format='YYYY-MM-DD 00:00:00' :disabled-date='startDisabledDate' />
              </a-form-item>
              <a-form-item label=''>
                <a-date-picker  v-decorator="['endTime']"
                                format='YYYY-MM-DD 23:59:59'
                                placeholder='请选择结束时间'
                                valueFormat='YYYY-MM-DD 23:59:59' :disabled-date='endDisabledDate' />
              </a-form-item>
              <a-form-item>
                <a-button type='primary' html-type='submit'>
                  <a-icon type='search' />
                  查询
                </a-button>
              </a-form-item>
            </a-form>
          </a-row>
        </div>
        <div style='height: 90%'>
          <bar-chart
            v-show='xData.length'
            :loading='loading'
            height='100%'
            width='100%'
            :id='"bar1"'
            :x-data='xData'
            :y-data='yData'
          />
          <a-empty style='height: 100%' v-show='!xData.length'></a-empty>
        </div>
      </div>

      <div style='height: 50%;'>
        <div style='height: 10%'>
          <a-row>
            <a-form :form='form1' layout='inline' @submit='handleQueryData1'>
              <a-form-item>
                <h3>告警目的IP</h3>
              </a-form-item>
              <a-form-item label=''>
                <a-date-picker v-decorator="['startTime' ]"
                               placeholder='请选择开始时间'
                               valueFormat='YYYY-MM-DD 00:00:00'
                               format='YYYY-MM-DD 00:00:00' :disabled-date='startDisabledDate1' />
              </a-form-item>
              <a-form-item label=''>
                <a-date-picker v-decorator="['endTime']"
                               format='YYYY-MM-DD 23:59:59'
                               placeholder='请选择结束时间'
                               valueFormat='YYYY-MM-DD 23:59:59' :disabled-date='endDisabledDate1'  />
              </a-form-item>
              <a-form-item>
                <a-button type='primary' html-type='submit'>
                  <a-icon type='search' />
                  查询
                </a-button>
              </a-form-item>
            </a-form>
          </a-row>
        </div>
        <div style='height: 90%'>
          <bar-chart
            v-show='xData1.length'
            :loading='loading1'
            height='100%'
            width='100%'
            :id='"bar2333"'
            :x-data='xData1'
            :y-data='yData1'
          />
          <a-empty style='height: 100%' v-show='!xData1.length'></a-empty>
        </div>
      </div>


      <div style='height: 50%;'>
        <div style='height: 10%'>
          <a-row>
            <a-form :form='form2' layout='inline' @submit='handleQueryData'>
              <a-form-item>
                <h3>告警类型</h3>
              </a-form-item>
              <a-form-item label=''>
                <a-date-picker   v-decorator="['startTime' ]"
                                 placeholder='请选择开始时间'
                                 valueFormat='YYYY-MM-DD 00:00:00'
                                 format='YYYY-MM-DD 00:00:00' :disabled-date='startDisabledDate2' />
              </a-form-item>
              <a-form-item label=''>
                <a-date-picker   v-decorator="['endTime']"
                               format='YYYY-MM-DD 23:59:59'
                                 placeholder='请选择结束时间'
                               valueFormat='YYYY-MM-DD 23:59:59' :disabled-date='endDisabledDate2'/>
              </a-form-item>
              <a-form-item>
                <a-button type='primary' html-type='submit'>
                  <a-icon type='search' />
                  查询
                </a-button>
              </a-form-item>
            </a-form>
          </a-row>
        </div>
        <div style='height: 90%'>
          <bar-chart
            v-show='xData2.length'
            :loading='loading2'
            height='100%'
            width='100%'
            :id='"bar3"'
            :x-data='xData2'
            :y-data='yData2'
          />
          <a-empty style='height: 100%' v-show='!xData2.length'></a-empty>
        </div>
      </div>
    </div>
  </business-layout>
</template>

<script>
import { LineChart, BarChart } from '@/business-components/charts'
import CreateChart from '@/business-components/create-chart/index.vue'
import CreateTab from '@/business-components/create-tab/index.vue'
import HistoryChartItem from '@/business-components/history-chart-item/index.vue'
import CreatePoint from '@/business-components/create-point/index.vue'
import { getNetworkAlarm } from '@/api/customReport'
import moment from 'moment'

const pageType = 'history'
let mark = 0
export default {
  name: 'HistoryTime',
  mixins: [],
  components: {
    CreatePoint,
    CreateTab,
    LineChart,
    BarChart,
    CreateChart,
    HistoryChartItem
  },
  props: {},
  watch: {
    activeKey(val) {
      if (val) {
        this.findAllReportByPageId()
      }
    }
  },
  computed: {},
  data() {
    this.pageType = pageType
    return {
      activeKey: '',
      form: this.$form.createForm(this),
      form1: this.$form.createForm(this),
      form2: this.$form.createForm(this),
      selectList: [],
      selectList1: [],
      selectList2: [],
      menuId: '',
      myBarChart: null,
      barSpinning: true,
      visible: false,
      loading: false,
      loading1: false,
      loading2: false,
      mdl: null,
      historyTimeModel: null,
      tabs: [],
      yData: [],
      xData: [],
      yData1: [],
      xData1: [],
      yData2: [],
      xData2: [],
      legendList: [
        {
          name: '预测数据'
        },
        {
          name: '实际数据'
        }
      ],
      unit: '',
      unit1: '',
      unit2: '',
      historyVisible: false,
      confirmLoading: false,
      reportList: []
    }
  },
  created() {
    this.handleQueryData()
    this.handleQueryData2()
    setTimeout(()=>{
      this.handleQueryData1()
    }, 600)
  },
  methods: {
    moment,
    startDisabledDate(startValue) {
      const endValue = this.form.getFieldValue('endTime')
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > moment(endValue).valueOf()
    },
    endDisabledDate(endValue) {
      const startValue = this.form.getFieldValue('startTime')
      if (!startValue || !endValue) {
        return false
      }
      return moment(startValue).valueOf() >= endValue.valueOf()
    },
    startDisabledDate1(startValue) {
      const endValue = this.form1.getFieldValue('endTime')
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > moment(endValue).valueOf()
    },
    endDisabledDate1(endValue) {
      const startValue = this.form1.getFieldValue('startTime')
      if (!startValue || !endValue) {
        return false
      }
      return moment(startValue).valueOf() >= endValue.valueOf()
    },
    startDisabledDate2(startValue) {
      const endValue = this.form2.getFieldValue('endTime')
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > moment(endValue).valueOf()
    },
    endDisabledDate2(endValue) {
      const startValue = this.form2.getFieldValue('startTime')
      if (!startValue || !endValue) {
        return false
      }
      return moment(startValue).valueOf() >= endValue.valueOf()
    },
    handleQueryData(e) {
      e.preventDefault()
      this.loading = true
      const that = this
      const values = this.form.getFieldsValue(['startTime', 'endTime'])
      getNetworkAlarm({
        type: 1,
        ...values
      }).then(res => {
        if (res) {
          that.yData = res.map(item => item.total || 0)
          that.xData = res.map(item => item.sourceIp) || []
        } else {
          that.yData = []
          that.xData = []
        }
      })
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    handleQueryData1(e) {
      e.preventDefault()
      this.loading1 = true
      const that = this
      const values = this.form1.getFieldsValue(['startTime', 'endTime'])
      getNetworkAlarm({
        type: 2,
        ...values
      }).then(res => {
        if (res) {
          that.yData1 = res.map(item => item.total || 0)
          that.xData1 = res.map(item => item.destIp) || []
        } else {
          that.yData1 = []
          that.xData1 = []
        }
      })
      setTimeout(() => {
        this.loading1 = false
      }, 1000)
    },
    handleQueryData2() {
      this.loading2 = true
      const that = this
      const values = this.form2.getFieldsValue(['pointId', 'startTime', 'endTime'])
      getNetworkAlarm({
        type: 3,
        ...values
      }).then(res => {
        if (res) {
          that.yData2 = res.map(item => item.total || 0)
          that.xData2 = res.map(item => item.alarmType) || []
        } else {
          that.yData2 = []
          that.xData2 = []
        }
      })
      setTimeout(() => {
        this.loading2 = false
      }, 1000)
    }
  },
  mounted() {
  },
  updated() {
  },
  destroyed() {
  }
}
</script>
<style lang='less' scoped>
h3{
  color: rgb(54, 97, 184);
  font-weight: bold;
  font-size: 24px;
}
</style>